<template>
  <el-card shadow="never" :body-style="{ padding: '20px' }">
    <div class="jss-table">
      <!-- 查询过滤 -->
      <tableFilter v-if="!tableOptions.hideSearch" v-bind="$attrs" v-on="$listeners" :tableOptions="tableOptions"
        @handleSearch="handleSearch">
      </tableFilter>

      <!-- 表格操作 -->
      <tabletoolbar ref="tabletoolbar" v-bind="$attrs" v-on="$listeners" :cols="tableOptions.cols"
        @handleSetView="handleSetView">
        <slot></slot>
      </tabletoolbar>

      <!-- 表格 -->
      <el-table ref="eltable" v-loading="loading" element-loading-text="Loading..." :height="tableOptions.height || 600"
        :max-height="tableOptions.tableMaxHeight || 700" :data="tableData" width="100%" :header-cell-style="tableOptions.tableHeaderStyle || { background: '#eee' }
          " @selection-change="handleSelectionChange" :border="tableOptions.tableBorder || false"
        :size="tableOptions.tableSize" @sort-change="handleSortChange" @row-click="handleSelectRadio">
        <!-- 单选 -->
        <el-table-column label="" width="65" fixed="left" v-if="tableOptions.radioSelect">
          <template slot-scope="scope">
            <el-radio class="radio" v-model="templateSelection" :label="scope.$index">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <!-- 多选 -->
        <el-table-column type="selection" width="55" fixed="left" v-if="tableOptions.selection"></el-table-column>
        <el-table-column label="序号" width="55" :align="'center'">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column v-for="(item, index) in tableOptions.cols" :render-header="item.render" :key="index"
          :prop="item.props" :label="item.label" :width="item.width" :align="item.align || 'center'"
          :filters="item.filters ? item.filters : null" :filter-method="item.filterHandler" :filter-multiple="false"
          :show-overflow-tooltip="item.showTool || true" :sortable="item.sortable || false" :fixed="item.fixed || false"
          :min-width="item.minWidth || 100" v-if="item.show">
          <template slot-scope="scope">
            <!-- 普通字段 -->
            <span v-if="item.type=='txt' || !item.type">
              <span @click="
                handleTableBtn(item.handleName, scope.row, scope.$index)
                ">{{ scope.row[item.props] }}</span>
            </span>
            <!-- 自定义组件  -->
            <span v-else-if="item.type == 'component'">
              <span class="tabel_edit_cell">
                <component :is="item.component" :row="scope.row" :defaultVal="scope.row[item.props]"
                  @handleChange="handleChangeCellSecelt"></component>
              </span>
            </span>
            <!-- 插槽 -->
            <span v-else-if="item.type == 'slot'">
                <slot :name="item.slotName" :row="scope.row" :index="scope.$index"></slot>
            </span>
            <!-- html -->
            <span v-else-if="item.type=='html'">
              <span v-html="item.html(scope.row)" @click="
                handleTableBtn(item.handleName, scope.row, scope.$index)
                " :class="{ cursor: item.cursor }"></span>
            </span>
            <!-- render 暂未开发 -->
            <span v-else-if="item.render"> </span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('common.control')" :align="tableOptions.handleAlign || 'left'"
          :width="tableOptions.finalColWidth || 200" v-if="tableOptions.handle && tableOptions.handle.length"
          :fixed="tableOptions.tableFixed || false">
          <template slot-scope="scope">
            <el-button v-for="(item, index) in tableOptions.handle" :key="index" :type="item.type || 'primary'"
              size="small" @click="handleTableBtn(item.handleName, scope.row, scope.$index)">{{ item.txt }}</el-button>


          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination v-if="!tableOptions.hidePage" background :total="total" style="margin-top: 20px"
        layout="sizes, prev, pager, next" :page-sizes="[10, 20, 30, 50]" @current-change="handleChangePage"
        @size-change="handleSizeChange">
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
export default {
  props: ["tableOptions"],
  data() {
    return {
      loading: false,
      tableData: [], //数据源
      templateSelection: "", //多选
      tableIndex: 1, //表格序号
      total: 0, //总数
      isShowMore: false, //是否展开
      form: {}, //外部查询参数
      // 查询参数 固定分页
      queryparams: {
        pageIndex: 1,
        pageSize: 10,
        // userId: 0,
      },
    };
  },
  computed: {
    // 表单查询计算
    searcFromList() {
      return this.tableOptions.cols.filter((el) => el.showInSerach);
    },
  },

  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      const tabeleParams = Object.assign(this.queryparams, this.form);
      if (this.tableOptions.apiFn) {
        this.loading = true;
        this.tableOptions
          .apiFn(tabeleParams)
          .then((res) => {
            this.loading = false;
            if (res.code == 200) {
              this.tableData = res.data;
              this.total = res.total ? res.total : res.data.length;
            }
          })
          .catch((err) => {
            this.loading = false;
          });
      }
    },
    // 查询
    handleSearch(params) {
      this.form = params;
      console.log(this.queryparams, "查询参数queryparams");
      console.log(this.form, "查询参数form");
      this.queryparams.pageIndex = 1;
      this.initData();
    },
    // 重置
    handleRest() {
      // for (var _key in this.$refs) {
      //   if (this.$refs[_key] && this.$refs[_key][0]) {
      //     console.log(_key);
      //     this.$refs[_key][0].clear();
      //   }
      // }
      // for (var _key in this.form) {
      //   this.form[_key] = null;
      // }
    },
    // 分页
    handleChangePage(v) {
      this.queryparams.pageIndex = v;
      this.initData();
    },
    handleSizeChange(v) {
      this.queryparams.pageSize = v;
      this.initData();
    },
    // 表头搜索事件监听字段
    handleChange(val, params) {
      console.log(val, params, "参数值");
      this.queryparams[params] = val;
    },
    // 单元格选择事件
    handleChangeCellSecelt(v, a, row) {
      console.log(v, row);
    },
    // 事件
    handleTableBtn(name, row, index) {
      this.$emit("handleTableBtn", name, row, index);
    },
    // 多选
    handleSelectionChange(val) {
      if (val && val.length) {
        this.$refs.tabletoolbar.disabled = false;
      } else {
        this.$refs.tabletoolbar.disabled = true;
      }
      this.$emit("handleSelectionChange", val);
    },
    // 单选
    handleSelectRadio(val) {
      if (val) this.$refs.tabletoolbar.disabled = false;
      this.$emit("handleSelectRadio", val);
    },
    //排序事件
    handleSortChange(a) {
      // 降序
      if (a.order == "descending") {
        this.$emit("handleTabelSort", a.prop, a.order);
      } else {
        this.$emit("handleTabelSort", a.prop, a.order);
      }
    },
    // 试图
    handleSetView(val) {
      this.tableData = [];
      this.tableOptions.cols.forEach((el) => {
        val.forEach((item) => {
          if (item.label == el.label) {
            el.show = item.show;
          }
        });
      });
      console.log(this.tableOptions.cols)
      // this.handleSearch();
      this.$refs.doLayout;
      this.$forceUpdate();
    },
  },
};
</script>






<style scoped>
.jss-table>>>.el-progress-bar .el-progress-bar__outer {
  height: 15px;
  border-radius: 0px;
}

.jss-table>>>.el-progress-bar .el-progress-bar__inner {
  border-radius: 0px;
}

.jss-table>>>.el-table td div {
  display: block;
}

.jsstbale_btntxt {
  cursor: pointer;
  text-decoration: underline;
  margin: 0 2px;
}

.jss-table .iconfont {
  cursor: pointer;
  display: inline-block;
  margin: 0 8px;
  font-size: 18px;
  color: rgb(255, 123, 0);
}

.cursor {
  cursor: pointer;
  color: #40b7ff;
  text-decoration: underline;
}

.nodata_container img {
  text-align: center;
  color: #999;
}

.jss-table>>>.el-table__fixed-right {
  right: 5px !important;
}
</style>